<template>
	<div class="box">
		<u-form :model="form" ref="uForm" class="form" :rules="rules">
			<u-form-item label="持卡人" label-width="150" prop="form.memberName">
				<u-input placeholder="点击可输入持卡人" class="mobile" v-model="form.memberName" required />
			</u-form-item>
			<u-form-item label="身份证号" label-width="150" prop="idcard">
				<u-input placeholder="点击可输入身份证号" class="mobile" focus v-model="form.idcard" type="" @input="inputCard" required />
			</u-form-item>
			<u-form-item label="卡号" label-width="150" prop="form.cardNumber">
				<u-input placeholder="点击可输入卡号" class="mobile" focus v-model="form.cardNumber" type="number" required />
			</u-form-item>
			<u-form-item label="银行" label-width="150" prop="form.bankName">
				<u-input placeholder="点击可输入银行" class="mobile" focus v-model="form.bankName" required />
			</u-form-item>
			<u-form-item label="开户城市" label-width="150" placeholder="请选择城市" right-icon="arrow-right" prop="form.path">
				<u-input v-model="form.path" disabled @click="clickRegion" />
			</u-form-item>
			<u-form-item label="手机号" label-width="150" prop="form.cardMobile">
				<u-input placeholder="点击可输入手机号" class="mobile" focus v-model="form.cardMobile" type="number" />
			</u-form-item>
			<!-- 			<u-form-item label="验证码" label-width="150" prop="form.code1">
				<u-input placeholder="点击可输入验证码" class="mobile" focus v-model="form.code1" type="number" />
				<view @click="getCode" class="time">{{leftTime == 60?'获取验证码': leftTime+' 秒后'}}</view>
			</u-form-item> -->
		</u-form>
		<view class="button">
			<u-button class="settlement" @click="submit">提交</u-button>
		</view>

		<m-city :provinceData="region" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue" pickerSize="4"></m-city>
	</div>
</template>

<script>
	import gkcity from "@/components/m-city/m-cardCity.vue";
	import * as API_CARD from "@/api/card";
	import storage from "@/utils/storage.js";
	export default {
		components: {
			"m-city": gkcity
		},
		data() {
			return {
				form: {
					memberId: storage.getUserInfo().id,
					memberName: '',
					cardNumber: '',
					cardMobile: '',
					bankName: '',
					idcard: '',
					bankProvince: '',
					bankCity: '',
					path: ''
				},
				region: [
					//请求城市默认地址
					{
						id: "",
						localName: "请选择",
						children: [],
					},
				],
				rules: {
					memberName: [{
						required: true,
						message: '请填写持卡人',
						trigger: ['blur', 'change']
					}],
					idcard: [{
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					}]
				},
				leftTime: 60, // 剩余时间
				timer: null, // 计时器
				title: ''
			}
		},
		created() {
			// this.editSelectTypeLists = this.selectTypeLists[0].value; /* 默认选中 */
		},
		onLoad(options) {
			uni.showLoading({
				title: "加载中",
			});
			this.title = options.name
			// this.label = options.label
			if (options.name == "修改银行卡信息") {
				API_CARD.getCardColor(options.memberId).then(res => {
					if (res.statusCode == 200) {
						uni.hideLoading()
						this.form = res.data.result;
						this.form.path = res.data.result.bankCity + "," + res.data.result.bankProvince
					} else {
						uni.hideLoading()
						this.$u.toast(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			} else if (options.name == "添加银行卡") {
				uni.hideLoading()
			}
			uni.setNavigationBarTitle({
				title: options.name
			})

		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url,
				});
			},
			// 验证身份证
			inputCard(e) {
				if (e.length > 18) {
					this.$u.toast("请输入中国公民的18位身份证号码, 您当前输入了" + e.length + "位号码")					
					return false;
				}
				// 确保前17位每一位都是数字  
				for (var i = 0; i < e.length - 1; i++) {
					// 如何判断一个字母是数字  
					if (isNaN(parseInt(e.charAt(i)))) {
						this.$u.toast("您输入的身份证号码前17位包含有字母, 不合要求");
						return false;
					}
				}
				//  确保最后一位是数字或者X  
				var lastIDNum = e.charAt(17);
				if (isNaN(parseInt(e.charAt(i))) && lastIDNum.toLowerCase() != 'x') {
					this.$u.toast("您输入的身份证号码最后一位不是数字也不是x, 不合要求");
					return false;
				}
				return true;
			},
			/**
			 * 点击选择地址
			 */
			clickRegion() {
				this.$refs.cityPicker.show();
			},
			/**
			 * 选择地址回调
			 */
			getpickerParentValue(e) {
				let name = "";
				e.forEach((item, index) => {
					console.log("item", item)
					if (item.id) {
						if (index == 0) {
							this.form.bankProvince = item.localName;
							name += item.localName + ",";
						}
						if (index == 1) {
							this.form.bankCity = item.localName;
							name += item.localName;
						}
						this.form.path = name;
					}
				});
			},
			// 添加银行卡
			submit() {
				this.$refs.uForm.validate().then(res => {
					console.log(res)
					let params = JSON.parse(JSON.stringify(this.form));
					if (this.title == "修改银行卡信息") {
						this.updateBankMTH(params)
					} else if (this.title == "添加银行卡") {
						this.addBankMTH(params)
					}

				}).catch(errors => {
					console.log(errors)
					this.$u.toast("有信息待填写");

				})
			},
			// 添加
			addBankMTH(params) {
				uni.showLoading({
					title: "加载中",
				});
				API_CARD.addBankCardAPI(params).then(res => {
					if (res.data.code == 200) {
						uni.hideLoading()
						uni.navigateTo({
							url: "/pages/promotion/cardList/index",
						});
					} else {
						uni.hideLoading()
						this.$u.toast(res.data.message)
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			updateBankMTH(params) {
				uni.showLoading({
					title: "加载中",
				});
				API_CARD.updateBankCardAPI(params).then(res => {
					if (res.data.code == 200) {
						uni.hideLoading()
						uni.navigateTo({
							url: "/pages/promotion/cardList/index",
						});
					} else {
						uni.hideLoading()
						this.$u.toast(res.data.message)
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		width: 100%;
		padding: 10px 15px;
		box-sizing: border-box;

	}

	.addTitle {
		font-size: 40rpx;
		font-weight: 550;
	}

	.code {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		border-bottom: 2rpx solid #999;
		font-size: 34rpx;
	}

	.code span {
		width: 150rpx;
	}

	.mobile {
		width: 100%;
		// border: 2rpx solid #999999 !important;
		padding: 25rpx;
		box-sizing: border-box;
		border-radius: 5rpx;
	}

	select {
		height: 35px;
		width: 100%;
		flex: 1;
		border: none;
		background-color: #f9f9f9;
		overflow: hidden;
		outline: none;
	}

	select option {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.uni-input-placeholder {
		color: #999 !important;
		margin-left: 20rpx;
	}

	.button {
		width: 100%;
		margin-top: 50rpx;
	}

	.settlement {
		width: 100%;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
	}
</style>
